<template>
  <div class="drop_down mgr-20">
    <el-button type="primary" class="color-0" @click="hundleSelect">
      {{$t('messageLang.chooseText')}}<i class="el-icon-arrow-down el-icon-caret-bottom mgl-20"></i>
    </el-button>
    <div class="selsectItem bg-f boxS-i-4 border-r" v-if="showSelect">
      <div class="sele_item pdlr-20" v-for="item in selectData" :key="item.id"
        @click="getSelectVal(item)">{{item.name}}</div>
    </div>
  </div>
</template>
<script>
const selectData = [
  {
    id: 0,
    name: 'ETH'
  },
  {
    id: 1,
    name: 'Polygon'
  },
  {
    id: 2,
    name: 'Matic'
  },
  {
    id: 3,
    name: 'IMN'
  },
  {
    id: 4,
    name: 'WETH'
  }
]
export default {
  data () {
    return {
      text: '选择',
      showSelect: false,
      selectData: selectData
    }
  },
  mounted () {
    console.log('ok')
  },
  methods: {
    hundleSelect: function () {
      // this.$message('click on item ' + command)
      // this.text = command
      this.showSelect = !this.showSelect
    },
    getSelectVal: function (item) {
      this.showSelect = !this.showSelect
      this.text = item.name
    }
  }
}
</script>
<style lang="less" scoped>
  .drop_down {
    position: relative;
    button {
      width: 100%;
      span {
        width: 100%;
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        align-content: center;
        justify-content: space-between;
        align-items: center;
      }
    }
    /deep/.el-button--primary {
      background: #7de9ff!important;
      border: none;
      span {
        width: 100%;
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        align-content: center;
        justify-content: space-between;
        align-items: center;
      }
    }
    .selsectItem {
      position: absolute;
      top: 40px;
      width: 100%;
      height: auto;
      overflow: hidden;
      .sele_item {
        line-height: 37px;
      }
      .sele_item:not(:first-child) {
        border-top: 1px solid #dfdfdf;
      }
      .sele_item:hover {
        background: #7de9ff;
      }
    }
  }
</style>
